<template>
	<view class="order-list-page">
		<!-- 1. 顶部导航和筛选 (自定义导航栏样式) -->
		<view class="top-navigation">
			<!-- <view class="nav-left">
				<uni-icons type="left" size="24" color="#333" @click="goBack"></uni-icons>
			</view> -->
			<!-- 搜索框 -->	
			<uni-search-bar style="width: 100%" @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input"
				@cancel="cancel" @clear="clear" :placeholder="type==='buy'?'搜索买过的宝贝':'搜索卖过的宝贝'">
			</uni-search-bar>
			<!--<view class="nav-search-bar" @click="gotoSearch">
				<uni-icons type="search" size="18" color="#999"></uni-icons>
				<text class="placeholder"></text>
			</view>-->
			<!-- <view class="nav-right" @click="showFilterOptions">
				<uni-icons custom-prefix="iconfont" type="icon-filter" size="22" color="#555"></uni-icons>
				<text>查找</text>
			</view> -->
		</view>

		<!-- 2. Tab 筛选 -->
		<view class="tabs-container">
			<scroll-view scroll-x class="tabs-scroll" :scroll-into-view="'tab-' + currentTab" scroll-with-animation>
				<view
					v-for="(tab, index) in tabs"
					:key="index"
					:id="'tab-' + index"
					class="tab-item"
					:class="{ active: currentTab === index }"
					@click="changeTab(index)"
				>
					{{ tab.name }}
				</view>
			</scroll-view>
		</view>

		<!-- 3. 订单列表 -->
		<scroll-view class="order-list-scroll" scroll-y @scrolltolower="loadMoreOrders" :style="{ height: scrollViewHeight + 'px'}">
			<view v-if="filteredOrders.length === 0 && !isLoading" class="empty-orders">
				<image src="/static/empty_order_list.png" mode="widthFix" class="empty-icon"></image>
				<text>暂无相关订单</text>
			</view>
			<view v-else>
				<view class="order-card" v-for="order in filteredOrders" :key="order.id">
					<view class="order-header" @click="gotoOrderDetail(order)">
						<image class="seller-avatar" :src="order.seller.sellerAvatar" mode="aspectFill"></image>
						<text class="seller-name">{{ order.seller.sellerName }}</text>
						<!-- <text class="shop-tag" v-if="order.seller.isShop">鱼小铺</text> -->
						<text class="order-status" :class="order.statusClass">{{ order.statusText }}</text>
					</view>
					<view class="product-details" @click="gotoOrderDetail(order)">
						<image class="product-image" :src="getFirstImageUrl(order.product.imageUrls)" mode="aspectFill"></image>
						<view class="product-info">
							<text class="product-name">{{ order.product.title }}</text>
							<!-- 可以加商品规格等 -->
						</view>
						<text class="product-price">¥{{ order.product.price.toFixed(2) }}</text>
					</view>
					<view class="order-actions">
						<!-- <button class="action-btn more-btn" @click.stop="openMoreActionsDrawer(order)">更多</button> -->

						<button v-if="order.status === 'paid' && type ==='sell'" class="action-btn primary-btn" @click="gotoShipping(order)">去发货</button>
						<button v-if="order.status === 'shipped' && type ==='buy'" class="action-btn primary-btn" @click="gotoCompleted(order)">确定收货</button>
						<!-- <button v-if="order.status === 'completed' && !order.isReviewed" class="action-btn primary-btn review-btn" @click.stop="openReviewDrawer(order)">去评价</button> -->
						<button v-if="order.status === 'pending_payment'" class="action-btn primary-btn" @click.stop="goToPayment(order)">去付款</button>
						<button v-if="order.status === 'closed' || order.status === 'completed'" class="action-btn" @click.stop="buyAgain(order)">再次租用</button>
						<button v-if="order.status === 'pending_payment' || order.status === 'paid'" class="action-btn" @click.stop="contactSeller(order)">联系卖家</button>
						<!-- <button v-if="order.status === 'shipped'" class="action-btn" @click.stop="viewLogistics(order)">查看物流</button> -->
						<button v-if="order.status === 'closed'" class="action-btn" @click.stop="deleteOrder(order, true)">删除订单</button>
					</view>
					<view class="review-prompt" v-if="order.status === 'completed' && order.isReviewed && order.review">
						<uni-icons type="chatbubble-filled" size="16" color="#666"></uni-icons>
						<text>评价让更多人了解宝贝：{{ order.review.ratingText }}</text>
						<!-- 可以加几个标签 -->
					</view>
				</view>
			</view>
			<view class="loading-more" v-if="isLoading">加载中...</view>
			<view class="no-more" v-if="!isLoading && filteredOrders.length > 0 && noMoreData">没有更多订单了</view>
		</scroll-view>

		<!-- "更多操作" 抽屉 (图2) -->
		<uni-popup ref="moreActionsDrawer" type="bottom" background-color="#fff" @change="onDrawerChange('moreActions')">
			<view class="action-drawer-content">
				<view class="action-drawer-item" v-for="action in availableMoreActions" :key="action.key" @click="handleMoreAction(action.key)">
					{{ action.text }}
				</view>
				<view class="action-drawer-item cancel-action" @click="closeMoreActionsDrawer">取消</view>
				<view :style="{ height: safeAreaInsetsBottom + 'px' }"></view>
			</view>
		</uni-popup>

		<!-- "去评价" 抽屉 (图3) -->
		<uni-popup ref="reviewDrawer" type="bottom" background-color="#fff" @change="onDrawerChange('review')">
			<view class="review-drawer-content">
				<view class="review-drawer-header">
					<text>你觉得本次交易体验如何？</text>
					<uni-icons type="closeempty" size="22" color="#999" @click="closeReviewDrawer"></uni-icons>
				</view>
				<view class="rating-options">
					<view class="rating-item" :class="{active: currentReview.rating === 'good'}" @click="selectRating('good')">
						<image src="/static/rating_good.png" mode="aspectFit"></image>
						<text>好评</text>
					</view>
					<view class="rating-item" :class="{active: currentReview.rating === 'neutral'}" @click="selectRating('neutral')">
						<image src="/static/rating_neutral.png" mode="aspectFit"></image>
						<text>中评</text>
					</view>
					<view class="rating-item" :class="{active: currentReview.rating === 'bad'}" @click="selectRating('bad')">
						<image src="/static/rating_bad.png" mode="aspectFit"></image>
						<text>差评</text>
					</view>
				</view>
				<view class="review-tip">分享交易感受，帮到更多感兴趣的小伙伴~</view>
				<view class="add-image-placeholder" @click="addReviewImage">
					<uni-icons type="plus-filled" size="30" color="#E0E0E0"></uni-icons>
				</view>
				<!-- 已选择的图片可以显示在这里 -->
				<textarea class="review-text-input" v-model="currentReview.text" placeholder="宝贝满足你的期待吗？说说你的使用心得，分享给想买的他们吧~"></textarea>
				
				<view class="anonymous-review">
					<checkbox-group @change="anonymousChange">
						<label>
							<checkbox value="anonymous" :checked="currentReview.isAnonymous" color="#FFC800" style="transform:scale(0.8)"/>
							<text>匿名评价 你的头像和昵称将在评价中隐藏</text>
						</label>
					</checkbox-group>
				</view>
				<button class="submit-review-btn" @click="submitReview" :disabled="!currentReview.rating">提交评价</button>
				<view :style="{ height: safeAreaInsetsBottom + 'px' }"></view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
// 模拟订单数据和状态
const mockOrders = [];
const app = getApp();
export default {
	data() {
		return {
			type: 'buy',
			searchValue: '',
			tabs: [
				{ name: '全部', statusFilter: null },
				{ name: '待付款', statusFilter: 'pending_payment' },
				{ name: '待发货', statusFilter: 'paid' },
				{ name: '待收货', statusFilter: 'shipped' },
				{ name: '已完成', statusFilter: 'completed' }, // 特殊状态，表示已完成但未评价
				// { name: '退款中', statusFilter: 'refunding' }
			],
			currentTab: 0,
			allOrders: [], // 存储所有加载的订单
			isLoading: false,
			noMoreData: false,
			page: 1,
			scrollViewHeight: 0,
			safeAreaInsetsBottom: 0,
			selectedOrderForMore: null, // 当前操作“更多”的订单
			selectedOrderForReview: null, // 当前操作“评价”的订单
			currentReview: {
				rating: '', // 'good', 'neutral', 'bad'
				text: '',
				images: [],
				isAnonymous: true,
			},
			// 更多操作列表
			moreActionsList: [
				// { key: 'view_funds', text: '查看钱款' },
				// { key: 'snapshot', text: '宝贝快照' },
				// { key: 'complain_seller', text: '投诉卖家' },
				{ key: 'delete_order', text: '删除订单' },
				// { key: 'add_impression', text: '添加印象' },
				// { key: 'send_flower', text: '送小红花' },
			],
		};
	},
	computed: {
		app() {
			return app
		},
		filteredOrders() {
			const filter = this.tabs[this.currentTab].statusFilter;
			if (!filter) {
				return this.allOrders;
			}
			if (filter === 'completed_unreviewed') {
				return this.allOrders.filter(order => order.status === 'completed' && !order.isReviewed);
			}
			return this.allOrders.filter(order => order.status === filter);
		},
		availableMoreActions() {
			if (!this.selectedOrderForMore) return [];
			let actions = [...this.moreActionsList];
			// 根据订单状态动态调整可用的“更多”操作
			// 例如，已关闭的订单可能不能“投诉卖家”或“送小红花”
			// if (this.selectedOrderForMore.status === 'closed') {
			//  actions = actions.filter(a => a.key !== 'complain_seller' && a.key !== 'send_flower');
			// }
			return actions;
		}
	},
	onShow(){
		this.allOrders = []
		this.total = 0
		this.loadInitialOrders();
	},
	onLoad(e) {
		this.type = e.type
		uni.setNavigationBarTitle({
			title: this.type === 'buy' ? '我买到的' : '我卖出的'
		})
		
		// this.loadInitialOrders();
		const systemInfo = uni.getSystemInfoSync();
		if (systemInfo.safeAreaInsets) {
			this.safeAreaInsetsBottom = systemInfo.safeAreaInsets.bottom;
		}
		// 动态计算 scroll-view 高度
		this.calculateScrollViewHeight();
	},
	methods: {
		search(res) {
			this.allOrders = []
			this.total = 0
			this.loadInitialOrders();
		},
		input(res) {},
		clear(res) {},
		blur(res) {},
		focus(e) {},
		cancel(res) {},

		getFirstImageUrl(urls) {
			if (!urls) return "";
			try {
				// 尝试解析JSON数组 //JSON.parse(urls)
				let parsedUrls = urls;
				if (Array.isArray(parsedUrls) && parsedUrls.length > 0) {
				return parsedUrls[0];
				}else {
					parsedUrls = urls.split(",");
					if (parsedUrls.length > 0 && parsedUrls[0].trim() !== "") {
						return parsedUrls[0].trim();
					}
				}
			} catch (e) {
				// 解析失败，则按逗号分隔
				const urlArray = urls.split(",");
				if (urlArray.length > 0 && urlArray[0].trim() !== "") {
				return urlArray[0].trim();
				}
			}
			return ""; // 如果都无效，返回空
		},
		loadInitialOrders() {
			//	if (this.isLoading) return;
			// 	this.isLoading = true;
			app.globalData.Request.post(app.globalData.ApiConstant.Order.myOrder, {
				keyword: this.searchValue,
				pageNum: this.page,
				status: this.tabs[this.currentTab].statusFilter,
				listType: this.type,
				pageSize: 99
			}).then(res => {
				if(res?.data?.records){
					res.data.records.forEach(order => {
						this.setOrderStatusProperties(order);
					});
					this.allOrders = res.data.records
					this.total = res.data.total;
				}
			});
		},
		calculateScrollViewHeight() {
			const systemInfo = uni.getSystemInfoSync();
			const windowHeight = systemInfo.windowHeight;
			let topNavHeight = 0;
			let tabsHeight = 0;

			const query = uni.createSelectorQuery().in(this);
			query.select('.top-navigation').boundingClientRect(data => {
				if (data) topNavHeight = data.height;
			}).exec(() => {
				query.select('.tabs-container').boundingClientRect(data => {
					if (data) tabsHeight = data.height;
					this.scrollViewHeight = windowHeight - topNavHeight - tabsHeight;
				}).exec();
			});
		},
		goBack() { uni.navigateBack(); },
		gotoSearch() { uni.showToast({ title: '跳转搜索页', icon: 'none' }); },
		showFilterOptions() { uni.showToast({ title: '打开筛选', icon: 'none' }); },
		
		changeTab(index) {
			console.log(index)
			if (this.currentTab === index) return;
			this.currentTab = index;
			
			// 实际项目中，切换 tab 可能需要重新请求数据
			this.page = 1;
			this.allOrders = [];
			this.noMoreData = false;
			this.loadInitialOrders();
			uni.pageScrollTo({ scrollTop: 0, duration: 0 }); // 切换时滚动到顶部
		},
		// },
		loadMoreOrders() {
			if (this.isLoading || this.noMoreData) return;
			this.noMoreData = true; // 简单设置为没有更多
		},
		setOrderStatusProperties(order) { // 辅助函数，设置订单状态文本和样式
			console.log(order)
			switch (order.status) {
				case 'pending_payment': order.statusText = '等待买家付款'; order.statusClass = 'status-pending'; break;
				case 'paid': order.statusText = '买家已付款'; order.statusClass = 'status-info'; break;
				case 'shipped': order.statusText = '卖家已发货'; order.statusClass = 'status-info'; break;
				case 'completed': order.statusText = '交易成功'; order.statusClass = 'status-success'; break;
				case 'closed': order.statusText = '交易关闭'; order.statusClass = 'status-closed'; break;
				case 'cancelled': order.statusText = '交易取消'; order.statusClass = 'status-closed'; break;
				case 'refunding': order.statusText = '退款中'; order.statusClass = 'status-warning'; break;
				default: order.statusText = '未知状态'; order.statusClass = 'status-default';
			}
		},
		gotoOrderDetail(order) {
			uni.navigateTo({
				url:
				"/pages/tb/product/productDetail?productId=" +
				order.product.id +
				"&type=1",
			});
		},
		openMoreActionsDrawer(order) {
			this.selectedOrderForMore = order;
			this.$refs.moreActionsDrawer.open();
		},
		closeMoreActionsDrawer() {
			this.$refs.moreActionsDrawer.close();
		},
		handleMoreAction(actionKey) {
			console.log(`执行操作: ${actionKey} for order: ${this.selectedOrderForMore.id}`);
			if (actionKey === 'delete_order') {
				this.deleteOrder(this.selectedOrderForMore);
			} else {
				uni.showToast({ title: `执行: ${this.moreActionsList.find(a=>a.key === actionKey)?.text}`, icon: 'none' });
			}
			this.closeMoreActionsDrawer();
		},
		deleteOrder(order, fromButton = false) { // fromButton 用于区分是从更多操作还是直接按钮点击
			uni.showModal({
				title: '提示',
				content: '确定要删除此订单吗？删除后不可恢复。',
				success: (res) => {
					if (res.confirm) {
						// 模拟删除
						this.allOrders = this.allOrders.filter(o => o.id !== order.id);
						uni.showToast({ title: '订单已删除', icon: 'success' });
						if (!fromButton) this.closeMoreActionsDrawer();
					}
				}
			});
		},
		gotoShipping(order){
			// 去发货
			let that = this
			uni.showModal({
				title: '提示',
				content: '确认发货吗',
				confirmText: '确定',
				cancelText: '取消',
				success: function (res) {
					if (res.confirm) {
						app.globalData.Request.post(app.globalData.ApiConstant.Order.confirmShipped, 
						{orderId: order.id}).then((res)=>{
							if(res.success){
								uni.showToast({ title: '操作成功', icon: 'success' });
								setTimeout(() => {
									that.loadInitialOrders();
								}, 500);
							}else{
								uni.showToast({ title: '操作失败', icon: 'none' });
							}
						})
					}
				}
			});
			// this.$refs.ShippingDialog.open()
		},
		gotoCompleted(order){
			// 确认收货
			let that = this
			uni.showModal({
				title: '提示',
				content: '确认收货吗',
				confirmText: '确定',
				cancelText: '取消',
				success: function (res) {
					if (res.confirm) {
						app.globalData.Request.post(app.globalData.ApiConstant.Order.confirmCompleted, 
						{orderId: order.id}).then((res)=>{
							if(res.success){
								uni.showToast({ title: '操作成功', icon: 'success' });
								setTimeout(() => {
									that.loadInitialOrders();
								}, 500);
							}else{
								uni.showToast({ title: '操作失败', icon: 'none' });
							}
						})
					}
				}
			});
		},
		openReviewDrawer(order) {
			this.selectedOrderForReview = order;
			this.currentReview = { rating: '', text: '', images: [], isAnonymous: true }; // 重置评价内容
			this.$refs.reviewDrawer.open();
		},
		closeReviewDrawer() {
			this.$refs.reviewDrawer.close();
		},
		selectRating(rating) {
			this.currentReview.rating = rating;
		},
		addReviewImage() {
			uni.chooseImage({
				count: 3 - this.currentReview.images.length, // 假设最多3张图
				sizeType: ['compressed'],
				success: (res) => {
					this.currentReview.images = [...this.currentReview.images, ...res.tempFilePaths];
				}
			});
		},
		anonymousChange(e) {
			this.currentReview.isAnonymous = e.detail.value.includes('anonymous');
		},
		submitReview() {
			if (!this.currentReview.rating) {
				uni.showToast({ title: '请选择评价等级', icon: 'none' });
				return;
			}
			console.log("提交评价:", this.currentReview, "for order:", this.selectedOrderForReview.id);
			uni.showLoading({ title: '提交中...' });
			setTimeout(() => {
				uni.hideLoading();
				// 更新订单的评价状态
				const orderIndex = this.allOrders.findIndex(o => o.id === this.selectedOrderForReview.id);
				if (orderIndex > -1) {
					this.allOrders[orderIndex].isReviewed = true;
					this.allOrders[orderIndex].review = { ratingText: this.currentReview.rating === 'good' ? '好评' : (this.currentReview.rating === 'neutral' ? '中评' : '差评'), text: this.currentReview.text };
					// 强制更新视图，如果直接修改对象属性不触发
					this.$set(this.allOrders, orderIndex, this.allOrders[orderIndex]);
				}
				uni.showToast({ title: '评价成功', icon: 'success' });
				this.closeReviewDrawer();
			}, 1000);
		},
		// 订单卡片按钮的占位方法 (与订单详情页类似)
		goToPayment(order) {
			uni.navigateTo({ url: `/pages/tb/order/order?id=${order.id}&action=pay` });
		},
		buyAgain(order) {
			uni.navigateTo({
				url: '/pages/tb/chat/chat?productId=' + order.product.id + '&receiverId=' + order.seller.sellerId
			})
			// uni.showToast({ title: '再次租用 ' + order.product.name, icon: 'none' }); 
		},
		contactSeller(order) { 
			uni.navigateTo({
				url: '/pages/tb/chat/chat?productId=' + order.product.id + '&receiverId=' + order.seller.sellerId
			})
			// uni.showToast({ title: '联系卖家 ' + order.seller.name, icon: 'none' });
		},
		viewLogistics(order) { uni.showToast({ title: '查看物流 ' + order.id, icon: 'none' }); },

		onDrawerChange(drawerType, e) {
			// console.log(`${drawerType} drawer state:`, e.show);
		}
	},
	created() {
	}
};
</script>

<style lang="scss" scoped>

.order-list-page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f7f8fa;
}

.top-navigation {
	display: flex;
	align-items: center;
	padding: 15rpx 20rpx;
	height: 88rpx; // 模拟导航栏高度
	background-color: #fff;
	box-sizing: border-box;
	// position: sticky; // 如果导航栏吸顶
	// top: 0;
	// z-index: 101;
	.nav-left {
		padding-right: 15rpx;
	}
	.nav-search-bar {
		flex-grow: 1;
		background-color: #f5f5f5;
		border-radius: 30rpx;
		padding: 12rpx 20rpx;
		display: flex;
		align-items: center;
		.placeholder {
			font-size: 26rpx;
			color: #aaa;
			margin-left: 10rpx;
		}
	}
	.nav-right {
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		font-size: 24rpx;
		color: #555;
		text { margin-left: 4rpx; }
	}
}

.tabs-container {
	background-color: #fff;
	// position: sticky; // 如果Tabs吸顶
	// top: 88rpx; // top-navigation 的高度
	// z-index: 100;
	border-bottom: 1rpx solid #f0f0f0;
	.tabs-scroll {
		white-space: nowrap;
		height: 80rpx;
		.tab-item {
			display: inline-block;
			padding: 0 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			color: #666;
			position: relative;
			&.active {
				color: #333;
				font-weight: bold;
				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 40rpx;
					height: 6rpx;
					background-color: #FFC800; // 闲鱼黄
					border-radius: 3rpx;
				}
			}
		}
	}
}

.order-list-scroll {
	flex: 1;
	background-color: #f7f8fa;
	.empty-orders {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 200rpx;
		color: #999;
		font-size: 28rpx;
		.empty-icon {
			width: 250rpx;
			margin-bottom: 30rpx;
		}
	}
	.order-card {
		background-color: #fff;
		margin: 20rpx 24rpx 0;
		border-radius: 16rpx;
		padding: 24rpx;
		.order-header {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			.seller-avatar {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				margin-right: 15rpx;
			}
			.seller-name {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}
			.shop-tag {
				background-color: #FFF0E6;
				color: #FF6A00;
				font-size: 20rpx;
				padding: 2rpx 8rpx;
				border-radius: 4rpx;
				margin-left: 10rpx;
			}
			.order-status {
				margin-left: auto;
				font-size: 26rpx;
				&.status-success { color: #28a745; } // 交易成功
				&.status-pending { color: #ff6a00; } // 待付款
				&.status-closed { color: #999; }   // 交易关闭/取消
				&.status-info { color: #17a2b8; }   // 买家已付款/卖家已发货
				&.status-warning { color: #ffc107; } // 退款中
			}
		}
		.product-details {
			display: flex;
			align-items: flex-start;
			margin-bottom: 20rpx;
			.product-image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 8rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
			}
			.product-info {
				flex-grow: 1;
				.product-name {
					font-size: 28rpx;
					color: #333;
					line-height: 1.4;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2; // 最多显示两行
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
			.product-price {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
				margin-left: 20rpx;
				flex-shrink: 0;
			}
		}
		.order-actions {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			flex-wrap: wrap; // 如果按钮过多换行
			.action-btn {
				height: 56rpx;
				line-height: 56rpx;
				border-radius: 28rpx;
				font-size: 24rpx;
				padding: 0 24rpx;
				margin-left: 15rpx;
				margin-top: 10rpx; // 用于换行时的间距
				border: 1rpx solid #ccc;
				background-color: #fff;
				color: #333;
				&::after { border: none; }
				&.more-btn {
					// 特殊样式给“更多”
				}
				&.primary-btn {
					background-color: #FFC800; // 闲鱼黄
					border-color: #FFC800;
					color: #333;
					font-weight: 500;
				}
				&.review-btn { // 去评价按钮可以更醒目
					// background-color: #FF5000;
					// color: #fff;
					// border-color: #FF5000;
				}
			}
		}
		.review-prompt {
			margin-top: 20rpx;
			padding-top: 20rpx;
			border-top: 1rpx solid #f5f5f5;
			font-size: 24rpx;
			color: #666;
			display: flex;
			align-items: center;
			uni-icons { margin-right: 8rpx; }
		}
	}
	.loading-more, .no-more { /* ... (与消息列表页类似) ... */ }
}

// "更多操作" 抽屉样式
.action-drawer-content {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	.action-drawer-item {
		padding: 30rpx 0;
		text-align: center;
		font-size: 30rpx;
		color: #333;
		&:not(:last-child) {
			border-bottom: 1rpx solid #f5f5f5;
		}
		&.cancel-action {
			color: #999;
			border-top: 10rpx solid #f5f5f5; // 与上方选项分隔开
		}
	}
}

// "去评价" 抽屉样式
.review-drawer-content {
	padding: 30rpx;
	padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
	.review-drawer-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
		text {
			font-size: 32rpx;
			font-weight: bold;
		}
	}
	.rating-options {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 30rpx;
		.rating-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			opacity: 0.5; // 默认半透明
			&.active {
				opacity: 1;
			}
			image {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 10rpx;
			}
			text {
				font-size: 26rpx;
				color: #555;
			}
		}
	}
	.review-tip {
		font-size: 24rpx;
		color: #999;
		text-align: center;
		margin-bottom: 30rpx;
	}
	.add-image-placeholder {
		width: 150rpx;
		height: 150rpx;
		background-color: #f5f5f5;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
	}
	.review-text-input {
		width: 100%;
		height: 180rpx;
		background-color: #f5f5f5;
		border-radius: 12rpx;
		padding: 20rpx;
		font-size: 28rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
	}
	.anonymous-review {
		margin-bottom: 40rpx;
		font-size: 24rpx;
		color: #666;
		label { display: flex; align-items: center; }
	}
	.submit-review-btn {
		background-color: #FFC800;
		color: #333;
		font-weight: bold;
		border-radius: 40rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 30rpx;
		&:disabled {
			background-color: #f0f0f0;
			color: #aaa;
		}
		&::after { border: none; }
	}
}
</style>